<template>
  <div class="app-container">
    <!-- 表单 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <!-- 选择标注任务 -->
      <el-form-item prop="taskId">
        <treeselect
          size="small"
          v-model="queryParams.taskId"
          :options="qaTaskOptions"
          :normalizer="normalizer"
          placeholder="选择标注任务"
        />
      </el-form-item>
      <!-- 按钮：搜索、重置 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 导出按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="annotationReportList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="类型" :formatter="dateFormatter" align="center" prop="name" />
      <el-table-column label="格式" :formatter="pointCountFormatter" align="center" prop="totalPointCount" />
      <el-table-column :label="a1Description" :formatter="dateFormatter" align="center" prop="a1" />
      <el-table-column :label="a2Description" :formatter="dateFormatter" align="center" prop="a2" />
      <el-table-column :label="a3Description" :formatter="dateFormatter" align="center" prop="a3" />
      <el-table-column :label="a4Description" :formatter="dateFormatter" align="center" prop="a4" />
      <el-table-column :label="a5Description" :formatter="dateFormatter" align="center" prop="a5" />
      <el-table-column :label="a6Description" :formatter="dateFormatter" align="center" prop="a6" />
      <el-table-column :label="a7Description" :formatter="dateFormatter" align="center" prop="a7" />
      <el-table-column :label="a8Description" :formatter="dateFormatter" align="center" prop="a8" />
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { treeselect } from '@/api/mark/qaTask'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getQaTask } from '@/api/mark/qaTask'
import {
  listAnnotationReport,
  getAnnotationReport,
  delAnnotationReport,
  addAnnotationReport,
  updateAnnotationReport,
  exportAnnotationReport,
} from '@/api/mark/annotationReport'

export default {
  name: 'AnnotationReport',
  components: { Treeselect },
  data() {
    return {
      // 验收任务树选项
      qaTaskOptions: [],
      formOptions: {},
      a1Description: '',
      a2Description: '',
      a3Description: '',
      a4Description: '',
      a5Description: '',
      a6Description: '',
      a7Description: '',
      a8Description: '',
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 标注属性统计报表表格数据
      annotationReportList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskId: undefined,
        fileType: '2d',
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    }
  },
  created() {
    treeselect().then((response) => {
      this.qaTaskOptions = this.handleTree(response.data, 'taskId')
    })
  },
  methods: {
    /** 转换验收任务数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.taskId,
        label: node.taskName,
        children: node.children,
      }
    },
    pointCountFormatter(row) {
      if (row.fileType == '2d') {
        if (row.totalPointCount) {
          if (row.totalPointCount == 2) {
            return '二维框'
          } else if (row.totalPointCount == 3) {
            return '二维框+侧棱'
          } else if (row.totalPointCount == 4) {
            return '二维框+接地线'
          } else if (row.totalPointCount == 5) {
            return '二维框+侧棱+接地线'
          }
        }
      }
      return row.totalPointCount
    },
    dateFormatter(row, column) {
      let ret = ''
      switch (column.property) {
        case 'name':
          {
            if (this.formOptions.name && this.formOptions.name[row.name]) ret = this.formOptions.name[row.name]
            else ret = row.name
          }
          break
        case 'a1':
          {
            if (this.queryParams.fileType === '2d') {
              if (this.formOptions.a1_2d && this.formOptions.a1_2d[row.a1]) ret = this.formOptions.a1_2d[row.a1]
              else ret = row.a1
            } else {
              ret = this.formOptions.a1_3d[row.a1]
            }
          }
          break
        case 'a2':
          {
            if (this.queryParams.fileType === '2d') {
              if (this.formOptions.a2_2d && this.formOptions.a2_2d[row.a2]) ret = this.formOptions.a2_2d[row.a2]
              else ret = row.a2
            } else {
              ret = this.formOptions.a2_3d[row.a2]
            }
          }
          break
        case 'a3':
          {
            if (this.queryParams.fileType === '2d') {
              if (this.formOptions.a3_2d && this.formOptions.a3_2d[row.a3]) ret = this.formOptions.a3_2d[row.a3]
              else ret = row.a3
            } else {
              ret = this.formOptions.a3_3d[row.a3]
            }
          }
          break
        case 'a4':
          {
            if (this.queryParams.fileType === '2d') {
              if (this.formOptions.a4_2d && this.formOptions.a4_2d[row.a4]) ret = this.formOptions.a4_2d[row.a4]
              else ret = row.a4
            } else {
              ret = this.formOptions.a4_3d[row.a4]
            }
          }
          break
        case 'a5':
          {
            if (this.queryParams.fileType === '2d') {
              if (this.formOptions.a5_2d && this.formOptions.a5_2d[row.a5]) ret = this.formOptions.a5_2d[row.a5]
              else ret = row.a5
            } else {
              ret = this.formOptions.a5_3d[row.a5]
            }
          }
          break
        case 'a6':
          {
            if (this.queryParams.fileType === '2d') {
              if (this.formOptions.a6_2d && this.formOptions.a6_2d[row.a6]) ret = this.formOptions.a6_2d[row.a6]
              else ret = row.a6
            } else {
              ret = this.formOptions.a6_3d[row.a6]
            }
          }
          break
        case 'a7':
          {
            if (this.queryParams.fileType === '2d') {
              if (this.formOptions.a7_2d && this.formOptions.a7_2d[row.a7]) ret = this.formOptions.a7_2d[row.a7]
              else ret = row.a7
            } else {
              ret = this.formOptions.a7_3d[row.a7]
            }
          }
          break
        case 'a8':
          {
            if (this.queryParams.fileType === '2d') {
              if (this.formOptions.a8_2d && this.formOptions.a8_2d[row.a8]) ret = this.formOptions.a8_2d[row.a8]
              else ret = row.a8
            } else {
              ret = this.formOptions.a8_3d[row.a8]
            }
          }
          break
      }
      return ret
    },
    /** 查询标注属性统计报表列表 */
    getList() {
      if (!this.queryParams.taskId) {
        alert('请选择标注任务。')
        return
      }
      this.loading = true
      getQaTask(this.queryParams.taskId).then((response) => {
        this.getDicts(response.data.markAttributes).then((res1) => {
          this.attributesInit(res1.data)
          if (this.queryParams.fileType === '2d') {
            this.a1Description = this.formOptions.a1_2d_description
            this.a2Description = this.formOptions.a2_2d_description
            this.a3Description = this.formOptions.a3_2d_description
            this.a4Description = this.formOptions.a4_2d_description
            this.a5Description = this.formOptions.a5_2d_description
            this.a6Description = this.formOptions.a6_2d_description
            this.a7Description = this.formOptions.a7_2d_description
            this.a8Description = this.formOptions.a8_2d_description
          } else {
            this.a1Description = this.formOptions.a1_3d_description
            this.a2Description = this.formOptions.a2_3d_description
            this.a3Description = this.formOptions.a3_3d_description
            this.a4Description = this.formOptions.a4_3d_description
            this.a5Description = this.formOptions.a5_3d_description
            this.a6Description = this.formOptions.a6_3d_description
            this.a7Description = this.formOptions.a7_3d_description
            this.a8Description = this.formOptions.a8_3d_description
          }
          listAnnotationReport(this.queryParams).then((response) => {
            this.annotationReportList = response.rows
            this.total = response.total
            this.loading = false
          })
        })
      })
    },
    attributesInit(attributeNames) {
      this.formOptions.name = JSON.parse(this.selectDictLabel(attributeNames, 'labelName')).values
      let a1_2d = this.selectDictLabel(attributeNames, 'a1_2d')
      if (a1_2d) {
        this.formOptions.a1_2d = JSON.parse(a1_2d).values
        this.formOptions.a1_2d_description = JSON.parse(a1_2d).typeDesc
      }
      let a2_2d = this.selectDictLabel(attributeNames, 'a2_2d')
      if (a2_2d) {
        this.formOptions.a2_2d = JSON.parse(a2_2d).values
        this.formOptions.a2_2d_description = JSON.parse(a2_2d).typeDesc
      }
      let a3_2d = this.selectDictLabel(attributeNames, 'a3_2d')
      if (a3_2d) {
        this.formOptions.a3_2d = JSON.parse(a3_2d).values
        this.formOptions.a3_2d_description = JSON.parse(a3_2d).typeDesc
      }
      let a4_2d = this.selectDictLabel(attributeNames, 'a4_2d')
      if (a4_2d) {
        this.formOptions.a4_2d = JSON.parse(a4_2d).values
        this.formOptions.a4_2d_description = JSON.parse(a4_2d).typeDesc
      }
      let a5_2d = this.selectDictLabel(attributeNames, 'a5_2d')
      if (a5_2d) {
        this.formOptions.a5_2d = JSON.parse(a5_2d).values
        this.formOptions.a5_2d_description = JSON.parse(a5_2d).typeDesc
      }
      let a6_2d = this.selectDictLabel(attributeNames, 'a6_2d')
      if (a6_2d) {
        this.formOptions.a6_2d = JSON.parse(a6_2d).values
        this.formOptions.a6_2d_description = JSON.parse(a6_2d).typeDesc
      }
      let a7_2d = this.selectDictLabel(attributeNames, 'a7_2d')
      if (a7_2d) {
        this.formOptions.a7_2d = JSON.parse(a7_2d).values
        this.formOptions.a7_2d_description = JSON.parse(a7_2d).typeDesc
      }
      let a8_2d = this.selectDictLabel(attributeNames, 'a8_2d')
      if (a8_2d) {
        this.formOptions.a8_2d = JSON.parse(a8_2d).values
        this.formOptions.a8_2d_description = JSON.parse(a8_2d).typeDesc
      }

      let a1_3d = this.selectDictLabel(attributeNames, 'a1_3d')
      if (a1_3d) {
        this.formOptions.a1_3d = JSON.parse(a1_3d).values
        this.formOptions.a1_3d_description = JSON.parse(a1_3d).typeDesc
      }
      let a2_3d = this.selectDictLabel(attributeNames, 'a2_3d')
      if (a2_3d) {
        this.formOptions.a2_3d = JSON.parse(a2_3d).values
        this.formOptions.a2_3d_description = JSON.parse(a2_3d).typeDesc
      }
      let a3_3d = this.selectDictLabel(attributeNames, 'a3_3d')
      if (a3_3d) {
        this.formOptions.a3_3d = JSON.parse(a3_3d).values
        this.formOptions.a3_3d_description = JSON.parse(a3_3d).typeDesc
      }
      let a4_3d = this.selectDictLabel(attributeNames, 'a4_3d')
      if (a4_3d) {
        this.formOptions.a4_3d = JSON.parse(a4_3d).values
        this.formOptions.a4_3d_description = JSON.parse(a4_3d).typeDesc
      }
      let a5_3d = this.selectDictLabel(attributeNames, 'a5_3d')
      if (a5_3d) {
        this.formOptions.a5_3d = JSON.parse(a5_3d).values
        this.formOptions.a5_3d_description = JSON.parse(a5_3d).typeDesc
      }
      let a6_3d = this.selectDictLabel(attributeNames, 'a6_3d')
      if (a6_3d) {
        this.formOptions.a6_3d = JSON.parse(a6_3d).values
        this.formOptions.a6_3d_description = JSON.parse(a6_3d).typeDesc
      }
      let a7_3d = this.selectDictLabel(attributeNames, 'a7_3d')
      if (a7_3d) {
        this.formOptions.a7_3d = JSON.parse(a7_3d).values
        this.formOptions.a7_3d_description = JSON.parse(a7_3d).typeDesc
      }
      let a8_3d = this.selectDictLabel(attributeNames, 'a8_3d')
      if (a8_3d) {
        this.formOptions.a8_3d = JSON.parse(a8_3d).values
        this.formOptions.a8_3d_description = JSON.parse(a8_3d).typeDesc
      }
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        mMarkAnnotationId: undefined,
        mQaResultId: undefined,
        fileName: undefined,
        fileType: undefined,
        m: undefined,
        e: undefined,
        totalPointCount: undefined,
        x: undefined,
        y: undefined,
        z: undefined,
        name: undefined,
        rotateTheta: undefined,
        orientTheta: undefined,
        a1: undefined,
        a2: undefined,
        a3: undefined,
        a4: undefined,
        a5: undefined,
        a6: undefined,
        a7: undefined,
        a8: undefined,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.mMarkAnnotationId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有标注属性统计报表数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return exportAnnotationReport(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
        })
        .catch(function () {})
    },
  },
}
</script>
